<%@ include file="../layout/taglib.jsp"%>
<div class="header-fix">
	<div class="wrap">
		<div class="hidden-sm hidden-md hidden-lg">
			<div class="col-xs-2 col-sm-5 col-md-5 col-lg-5">
				<span class="menu-mobile glyphicon glyphicon-menu-hamburger"></span>
			</div>
		</div>
		<div class="hidden-xs col-sm-7 col-md-7 col-lg-7">
			<div class="menu" data-path="${path}">
				<ul>
					<li data-path="home"><a
						href="<%=request.getContextPath()%>/lstcourses/index"><t:message code="homepage"/></a></li>
					
					
					<li class="dropdown" data-path="courses"><a
						href="javascript:void" class="dropdown-toggle"
						data-toggle="dropdown" data-hover="dropdown" data-delay="1000"
						data-close-others="false"><t:message code="product"/><b class="caret"></b>
					</a>
						<ul class="dropdown-menu">
							<li><a tabindex="-1"
								href="<%=request.getContextPath()%>/lstcourses/allcourses?level=1"><t:message code="beginner"/></a></li>
							<li class="divider"></li>
							<li><a tabindex="-1"
								href="<%=request.getContextPath()%>/lstcourses/allcourses?level=2"><t:message code="intermediate"/></a></li>
							<li><a tabindex="-1"
								href="<%=request.getContextPath()%>/lstcourses/allcourses?level=3"><t:message code="advanced"/></a></li>
							<!--<li><a tabindex="-1"
								href="  /statistic">Statistic</a></li>
							<li class="divider"></li>
							<li><a tabindex="-1" href="#">Logout</a></li> -->
						</ul></li> 
						<!-- 
					<li><a href="<%=request.getContextPath()%>/lstcourses/allcourses?level=1"><t:message code="product"/></a></li>
					-->
					<li><a href="<%=request.getContextPath()%>/forum/list_topic"><t:message code="forum"/></a></li>
					<!--<li><a href="#"><t:message code="info"/></a></li> -->
					<li><a href="<%=request.getContextPath()%>/lstcourses/basket"><t:message code="basket"/></a></li>
					 <c:if test="${sessionScope.userFLogin != null}">
					     <li><a href="<%=request.getContextPath()%>/lstcourses/buy_history"><t:message code="buy_history_menu"/></a></li>
					 </c:if>
				</ul>
			</div>
		</div>
		<div class="col-xs-10 col-sm-5 col-md-5 col-lg-5">
			<c:if test="${lztuser!=null}">
				<div class="request-friend col-xs-2 col-sm-2 col-md-2 col-lg-2">
					<c:if test='${notify.get("friend").size()>0}'>
						<span data-content='${notify.get("friend").size()}'></span>
					</c:if>
				</div>
				<div class="messagenf col-xs-2 col-sm-2 col-md-2 col-lg-2">
					<c:if test='${notify.get("message").size()>0}'>
						<span data-content='${notify.get("message").size()}'></span>
					</c:if>
				</div>
				<div class="event col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
				<div class="mypage col-xs-5 col-sm-5 col-md-5 col-lg-5">

					<div class="dropdown">
						<div class="dropdown-toggle" id="dropdownMenu1"
							data-toggle="dropdown" aria-expanded="true">
							<span class="user-name-wellcome hidden-xs hidden-sm hidden-md">Hi,${lztuser.getFirstName()}
								${lztuser.getLastName()} </span> <a onclick="javascript:void(0)"><img
								alt="Avarta"
								src="<%=request.getContextPath()%>/photoProfile/${lztuser.getIdUser()}" /></a>
							<span class="caret"></span>
						</div>
						<ul class="dropdown-menu" role="menu"
							aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuitem" tabindex="-1"
								href="<%=request.getContextPath()%>/profile"><t:message
											code="menu_txt1" /></a></li>
							
							<li class='has-sub'><a
								href='<%=request.getContextPath()%>/lstcourses/flogout'><span><t:message
											code="menu_txt2" /></span></a></li>
						</ul>
					</div>
				</div>
			</c:if>
			<c:if test="${lztuser==null}">
				<div class="menu col-xs-5 col-sm-5 col-md-5 col-lg-5"
					data-path="${path}">
					<ul>
						<li><a href='<%=request.getContextPath()%>/lstcourses/login'><span><t:message
										code="login" /></span></a></li>
									<!-- 	
										<li><a href='#' data-toggle="modal" data-target="#myModal"><span><t:message
										code="login" /></span></a></li> -->
					</ul>
				</div>
			</c:if>
			<div
				class="search glyphicon glyphicon-search col-xs-1 col-sm-1 col-md-1 col-lg-1">
			</div>
			<div class="logo1">
				<a href="<%=request.getContextPath()%>/lstcourses/index"> </a>
				<div class=flag>
					<span><a
						href="<%=request.getContextPath()%>/lstcourses/index?language=vn">
							vn </a>| <a
						href="<%=request.getContextPath()%>/lstcourses/index?language=en">en</a></span>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">LZT login</h4>
			</div>
			<div class="modal-body">
				<section class="tabpanel">
					<header>
						<nav data-path="${path}">
							<ul class="row nav nav-tabs" role="tablist" id="myTab">
								<li class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right"
									role="presentation"><a href="#signup" role="tab"
									aria-controls="signup" data-toggle="tab">Sign up</a></li>
								<li
									class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right active"
									role="presentation"><a href="#signin" role="tab"
									aria-controls="signin" data-toggle="tab">Sign in</a></li>
							</ul>
						</nav>
					</header>
					<article class="login">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="signin">
								<div class="social-login ">
									<div class="row">
										<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
											<a href="<c:url value="/connect" />"><img
												alt="facebook icon"
												src="/elearning/resources/images/social/FacebookLogin.png"></a>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
											<a href="<c:url value="/connect" />"><img
												alt="google icon"
												src="/elearning/resources/images/social/GoogleLogin.png"></a>
										</div>
									</div>
									<div class="devide">OR</div>
								</div>
								<div class="lzt-login">
									<div class="row">
										<form method="post" action="authen" id="LoginForm">
											<div class="wrap">
												<div class="form-group">
													<label for="username" class="control-label"> <t:message
															code="username" />
													</label> <input name="username" id="username" class="form-control" />
												</div>
												<div class="form-group">
													<label for="pass" class="control-label"> <t:message
															code="password" />
													</label> <input name="password" type="password" id="pass"
														class="form-control" />
												</div>
												<h2>${message}</h2>
												<div class="form-group">
													<a href="#">Forgot your password?</a>
												</div>
												<div class="checkbox">
													<label> <input type="checkbox" name="keppLogin"
														value="persistent"> Keep me login.
													</label>
												</div>
												<input class="btn btn-default pull-right" type="submit"
													value="<t:message code="submit"/>">
											</div>
										</form>
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane" id="signup">
								<div class="social-login ">
									<div class="row">
										<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
											<a href="<c:url value="/connect" />"><img
												alt="facebook icon"
												src="/elearning/resources/images/social/FacebookLogin.png"></a>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
											<a href="<c:url value="/connect" />"><img
												alt="google icon"
												src="/elearning/resources/images/social/GoogleLogin.png"></a>
										</div>
									</div>
									<div class="devide">OR</div>
								</div>
								<div class="lzt-login">
									<div class="row">
										<form method="post" action="authen" id="registerForm">
											<div class="wrap">
												<div class="form-group">
													<label for="username" class="control-label"> <t:message
															code="username" />
													</label> <input name="username" id="username" class="form-control" />
												</div>
												<div class="form-group">
													<label for="email" class="control-label"> <t:message
															code="email" />
													</label> <input name="email" id="email" class="form-control" />
												</div>
												<div class="form-group">
													<label for="pass" class="control-label"> <t:message
															code="password" />
													</label> <input name="password" type="password" id="pass"
														class="form-control" />
												</div>
												<div class="form-group">
													<label for="retypepass" class="control-label"> <t:message
															code="retypepass" />
													</label> <input type="password" name="retypepass" id="retypepass"
														class="form-control" />
												</div>
												<div>
													<div class="checkbox">
														<label> <input type="checkbox" name="checkPrivacy" value="privacy"> I agree to the Terms of Use and
															Privacy Policy
														</label>
													</div>
												</div>
												<input class="btn btn-default pull-right" type="submit"
													value="<t:message code="submit"/>">
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>

					</article>
				</section>
			</div>
		</div>
	</div>
</div>
<div class="template">
	<div class="parent">
		<div id="friend-list">
			<h1 class="webui-popover-title">YÃªu cáº§u káº¿t báº¡n má»i</h1>
			<ul class="new"></ul>
			<h1 class="webui-popover-title">YÃªu cáº§u káº¿t báº¡n cÅ© hÆ¡n</h1>
			<ul class="old"></ul>
		</div>
	</div>
	<div class="parent">
		<div id="message-list">
			<ul></ul>
		</div>
	</div>
</div>